import React, { useState } from 'react';
import PropTypes from 'prop-types';
import cn from 'classnames';
import { Collapse } from 'antd';
import Input from '@kuiper-components/input';
import { CaretRightOutlined } from '@ant-design/icons';
import Switch from '@kuiper-components/switch';
import s from './style.module.css';
import { Field } from '../Form';
import Textarea from '@kuiper-components/textarea';
import Helper from '../Helper';
import URLTextarea from './URLTextarea';
import { useFormContext } from 'react-hook-form';
import CheckboxGroup from '../CheckboxGroup';

const { Panel } = Collapse;

export default function AdvanceSettings({ className }) {
	const { watch, setValue } = useFormContext();
	const [selType, setSelType] = React.useState(0);
	const switchState = watch([
		'prelogin.site_login',
		'prelogin.is_http_auth_enabled',
		'prelogin.is_proxy_enabled',
	]);
	const selLoginType = watch('prelogin.login_method');
	const changeVulInfo = val => {
		setSelType(val);
	};
	React.useEffect(() => {
		if (switchState.site_login && selLoginType === undefined) {
			setValue('prelogin.login_method', 'form');
		}
	}, [switchState]);
	const loginType = () => {
		const typeArr = {
			form: (
				<>
					<Field
						name="prelogin.login_form_action_url"
						label={
							<span>
								登录URL
								<Helper
									placement="top"
									overlay="请填写登录页面的URL,例如：http://example.com/login"
								></Helper>
							</span>
						}
						required
						rules={[{ required: true, message: '请输入登录URL' }]}
						className={s.item_1}
						labelClassName={s.label_1}
						render={({ onChange, onBlur, value }) => {
							return (
								<Input
									onChange={onChange}
									onBlur={onBlur}
									value={value}
									className={s.w_30}
									placeholder="请输入登录URL"
									autoComplete={'off'}
								></Input>
							);
						}}
					></Field>
					<Field
						name="prelogin.login_form_postdata"
						label={
							<span>
								POST认证参数
								<Helper
									placement="top"
									overlay={`请按照以下格式填写:u=user&p=passwd`}
								></Helper>
							</span>
						}
						required
						rules={[{ required: true, message: '请输入POST认证参数' }]}
						className={s.item_1}
						labelClassName={s.label_1}
						render={({ onChange, onBlur, value }) => {
							return (
								<Input
									onChange={onChange}
									onBlur={onBlur}
									value={value}
									className={s.w_30}
									placeholder="请输入认证参数"
									autoComplete={'off'}
								></Input>
							);
						}}
					></Field>
				</>
			),
			json: (
				<>
					<Field
						name="prelogin.login_json_action_url"
						label={
							<span>
								登录URL
								<Helper
									placement="top"
									overlay="请填写登录页面的URL,例如：http://example.com/login"
								></Helper>
							</span>
						}
						required
						rules={[{ required: true, message: '请输入登录URL' }]}
						className={s.item_1}
						labelClassName={s.label_1}
						render={({ onChange, onBlur, value }) => {
							return (
								<Input
									onChange={onChange}
									onBlur={onBlur}
									value={value}
									className={s.w_30}
									placeholder="请输入登录URL"
									autoComplete={'off'}
								></Input>
							);
						}}
					></Field>
					<Field
						name="prelogin.login_json_postdata"
						label={
							<span>
								POST认证参数
								<Helper
									placement="top"
									overlay={`请填写JSON格式:{"u":"admin","p":"qqq"}`}
								></Helper>
							</span>
						}
						required
						rules={[{ required: true, message: '请输入POST认证参数' }]}
						className={s.item_1}
						labelClassName={s.label_1}
						render={({ onChange, onBlur, value }) => {
							return (
								<Textarea
									onChange={onChange}
									onBlur={onBlur}
									value={value}
									className={s.w_30}
									placeholder='{"u":"admin","p":"ABCabc123"}'
								></Textarea>
							);
						}}
					></Field>
				</>
			),
			cookie: (
				<>
					<Field
						name="prelogin.request_cookie"
						required
						rules={[{ required: true, message: '请输入登录Cookie' }]}
						label={
							<span>
								Cookie
								{/* <Helper
									placement="top"
									overlay="通过已经登录网站后得到的Cookie来检测网站，设置用户的Cookie就对用户的权限能访问到的网页进行检测，一般设置管理员用户的Cookie"
								></Helper> */}
							</span>
						}
						className={s.item_1}
						labelClassName={s.label_1}
						render={({ onChange, onBlur, value }) => {
							return (
								<Textarea
									onChange={onChange}
									onBlur={onBlur}
									value={value}
									className={cn(s.w_30, s.h_7)}
									placeholder="例如：_example=afsdfafwefa180b;_example2=BSDF234DFAS598;"
								></Textarea>
							);
						}}
					></Field>
				</>
			),
			headers: (
				<>
					<Field
						name="prelogin.request_http_headers"
						required
						rules={[{ required: true, message: '请输入登录headers' }]}
						label={
							<span>
								headers
								{/* <Helper
									placement="top"
									overlay="通过已经登录网站后得到的headers来检测网站，设置用户的headers就对用户权限能访问到的网页进行检测，一般设置管理员用户的headers"
								></Helper> */}
							</span>
						}
						className={s.item_1}
						labelClassName={s.label_1}
						render={({ onChange, onBlur, value }) => {
							return (
								<Textarea
									onChange={onChange}
									onBlur={onBlur}
									value={value}
									className={cn(s.w_30, s.h_7)}
									placeholder="每一行输入一组key和value。例如:&#13;&#10;Acceot: */*&#13;&#10;Accept-Encoding: gzip,deflate,br&#13;&#10;Host: localhost:3000"
								></Textarea>
							);
						}}
					></Field>
				</>
			),
		};
		return typeArr[selLoginType];
	};
	return (
		<Collapse
			className={cn(className, s.advanceSettings, s.Collapse)}
			expandIconPosition="right"
			expandIcon={({ isActive }) => (
				<span>
					配置
					<CaretRightOutlined
						style={{ color: 'var(--color-text-1)' }}
						rotate={isActive ? 270 : 90}
					/>
				</span>
			)}
		>
			<Panel
				header={
					<>
						预登录
						{/* <Helper
							placement="right"
							overlay={
								<div style={{ maxWidth: '16rem' }}>
									{`通过已经登录网站后得到的Cookie来检测网站，设置用户的Cookie就对用户权限能访问到的网页进行检测，一般设置管理员用户的Cookie。`}
								</div>
							}
						/> */}
					</>
				}
				key="preloginBox"
			>
				<Field
					name="prelogin.site_login"
					label="网站登录"
					className={s.title}
					render={({ onChange, onBlur, value }) => {
						return (
							<Switch
								onChange={onChange}
								onBlur={onBlur}
								checked={value}
							></Switch>
						);
					}}
				></Field>
				<div
					className={s.infoBox}
					style={{ height: switchState['prelogin.site_login'] ? '220px' : 0 }}
				>
					<Field
						name="prelogin.login_method"
						label="登录方式"
						className={cn(s.item_1, s.itemFirst)}
						labelClassName={s.label_1}
						render={({ onChange, onBlur, value }) => {
							return (
								<CheckboxGroup
									options={[
										{ label: '表单登录', value: 'form' },
										{ label: 'JSON登录', value: 'json' },
										{
											label: 'Cookie',
											value: 'cookie',
											tip:
												'通过配置Cookie可实现对当前站点需要身份认证请求的检测，一般建议提供管理员的Cookie信息。',
										},
										{
											label: 'Headers',
											value: 'headers',
											tip:
												'通过已经登录网站后得到的Headers来检测网站，设置用户的Headers就对用户权限能访问到的网页进行检测，一般设置管理员用户的Headers。',
										},
									]}
									checkboxClassName={s.typeCheckbox}
									boxClassName={s.boxClassName}
									checked={value}
									onChange={onChange}
									onBlur={onBlur}
									single={true}
									borderless={true}
								/>
							);
						}}
					></Field>
					{loginType()}
				</div>
				{/*  */}
				<Field
					name="prelogin.is_http_auth_enabled"
					label="HTTP认证"
					className={s.title}
					render={({ onChange, onBlur, value }) => {
						return (
							<Switch
								onChange={onChange}
								onBlur={onBlur}
								checked={value}
							></Switch>
						);
					}}
				></Field>
				<div
					className={s.infoBox}
					style={{
						height: switchState['prelogin.is_http_auth_enabled'] ? 'auto' : 0,
					}}
				>
					<div className={s.text}>支持BASIC、Digest</div>
					<Field
						name="prelogin.http_auth_username"
						label="用户名"
						className={cn(s.item_1, s.itemFirst)}
						labelClassName={s.label_1}
						required
						rules={[{ required: true, message: '请输入用户名' }]}
						render={({ onChange, onBlur, value }) => {
							return (
								<Input
									onChange={onChange}
									onBlur={onBlur}
									value={value}
									className={s.w_30}
									placeholder="请输入用户名"
									autoComplete={'off'}
								></Input>
							);
						}}
					></Field>
					<Field
						name="prelogin.http_auth_password"
						required
						rules={[{ required: true, message: '请输入密码' }]}
						label="密码"
						className={s.item_1}
						labelClassName={s.label_1}
						render={({ onChange, onBlur, value }) => {
							return (
								<Input
									onChange={onChange}
									onBlur={onBlur}
									value={value}
									className={s.w_30}
									placeholder="请输入密码"
									autoComplete={'off'}
								></Input>
							);
						}}
					></Field>
				</div>
				{/*  */}
				<Field
					name="prelogin.is_proxy_enabled"
					label="代理服务器"
					className={s.title}
					render={({ onChange, onBlur, value }) => {
						return (
							<Switch
								onChange={onChange}
								onBlur={onBlur}
								checked={value}
							></Switch>
						);
					}}
				></Field>
				<div
					className={s.infoBox}
					style={{
						height: switchState['prelogin.is_proxy_enabled'] ? 'auto' : 0,
					}}
				>
					<Field
						name="prelogin.proxy_scheme"
						rules={[{ required: true, message: '请输入协议' }]}
						label="协议"
						required
						className={cn(s.item_1, s.itemFirst)}
						labelClassName={s.label_1}
						render={({ onChange, onBlur, value }) => {
							return (
								<Input
									onChange={onChange}
									disabled={true}
									onBlur={onBlur}
									value={value}
									className={s.w_30}
									placeholder="请输入协议"
									autoComplete={'off'}
								></Input>
							);
						}}
					></Field>
					<Field
						rules={[{ required: true, message: '请输入IP' }]}
						name="prelogin.proxy_host"
						label="IP"
						required
						className={s.item_1}
						labelClassName={s.label_1}
						render={({ onChange, onBlur, value }) => {
							return (
								<Input
									onChange={onChange}
									onBlur={onBlur}
									value={value}
									className={s.w_30}
									placeholder="请输入IP"
									autoComplete={'off'}
								></Input>
							);
						}}
					></Field>
					<Field
						rules={[{ required: true, message: '请输入端口' }]}
						name="prelogin.proxy_port"
						label="端口"
						required
						className={s.item_1}
						labelClassName={s.label_1}
						render={({ onChange, onBlur, value }) => {
							return (
								<Input
									onChange={onChange}
									onBlur={onBlur}
									value={value}
									className={s.w_30}
									placeholder="请输入端口"
									autoComplete={'off'}
									type="number"
								></Input>
							);
						}}
					></Field>
					<Field
						name="prelogin.proxy_username"
						label="用户名"
						rules={[{ required: true, message: '请输入用户名' }]}
						className={s.item_1}
						labelClassName={s.label_1}
						render={({ onChange, onBlur, value }) => {
							return (
								<Input
									onChange={onChange}
									onBlur={onBlur}
									value={value}
									className={s.w_30}
									placeholder="请输入用户名"
									autoComplete={'off'}
								></Input>
							);
						}}
					></Field>
					<Field
						name="prelogin.proxy_password"
						rules={[{ required: true, message: '请输入密码' }]}
						label="密码"
						className={s.item_1}
						labelClassName={s.label_1}
						render={({ onChange, onBlur, value }) => {
							return (
								<Input
									onChange={onChange}
									onBlur={onBlur}
									value={value}
									className={s.w_30}
									placeholder="请输入密码"
									autoComplete={'off'}
								></Input>
							);
						}}
					></Field>
				</div>
			</Panel>
			<Panel
				header={
					<>
						自定义监测页面
						<Helper
							placement="right"
							overlay={
								<div style={{ maxWidth: '16rem' }}>
									{`通过自定义设置额外监测入口页面及不需监测的页面，扫描监测范围更准更全面。`}
								</div>
							}
						/>
					</>
				}
				key="customUrl"
			>
				<Field
					label="需额外监测页面入口"
					name="customMonitorPage.includeUrl"
					className={s.customUrlField}
					render={({ onChange, onBlur, value }) => {
						return (
							<div className={s.urlTextareaWrapper}>
								<URLTextarea
									className={s.textarea}
									placeholder="请输入需额外监测URL入口的关键参数，一行一个"
									onChange={onChange}
									onBlur={onBlur}
									value={value}
								/>
								<Helper
									placement="left"
									overlay={
										<div style={{ maxWidth: '16rem' }}>
											{`如您需要监测地址入口是'https://www.scanv.com/admin/'，可在此输入'/admin/'即可。`}
										</div>
									}
								/>
							</div>
						);
					}}
				/>
				<Field
					label="不需监测页面"
					name="customMonitorPage.excludeUrl"
					className={s.customUrlField}
					render={({ onChange, onBlur, value }) => {
						return (
							<div className={s.urlTextareaWrapper}>
								<URLTextarea
									className={s.textarea}
									placeholder="请输入不需监测URL的关键参数，一行一个。"
									onChange={onChange}
									onBlur={onBlur}
									value={value}
								/>
								<Helper
									placement="left"
									overlay={
										<div style={{ maxWidth: '16rem' }}>
											{`系统自动过滤监测匹配到参数的URL，如您不需要监测地址是'https://www.scanv.com/admin/'，可在此输入'/admin/'即可。`}
										</div>
									}
								/>
							</div>
						);
					}}
				/>
			</Panel>
		</Collapse>
	);
}

AdvanceSettings.propTypes = {
	className: PropTypes.string,
};

AdvanceSettings.defaultProps = {
	className: s.advanceSettings,
};
